
import "./index.scss";
import { Layout, Tag, Tooltip, Avatar, Button, Dropdown, Menu, Modal } from 'antd';

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  PoweroffOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import { connect } from "react-redux"
import React, { useRef } from "react"
import { mbdata } from "../../mobx/data";
import { observer } from "mobx-react"
import { roleList } from "../../utils";
import { withRouter } from "react-router-dom"
import { $http } from "../../api";
import { baseURL } from "../../api/request";
import { changecollapsed } from "../../redux/actions";
const { Header } = Layout


function Head({ collapsed, history, dispatch }) {
  const { userInfo } = mbdata
  const file = useRef()
  const toggle = () => {
    dispatch(changecollapsed(!collapsed))
  }
  const uploadFile = () => {
    file.current.click()
  }
  const startSenfFile = () => {
    var filedata = file.current.files[0]
    var data = new FormData()
    data.append("avatar", filedata)
    $http.uploadavatar(data)
      .then(res => {
        console.log(res);
        if (res.code == 200) {
          mbdata.changeUserInfo({
            ...mbdata.userInfo,
            avatar: res.path
          })
        }
      })
  }
  function logoutClick() {
    Modal.confirm({
      title: '退出登录警告',
      icon: <ExclamationCircleOutlined />,
      content: '你真的要退出登录吗?',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        history.replace("/login");   // 不会产生前进后退 
        sessionStorage.removeItem("token");
        mbdata.changeUserInfo(null);  // 清理用户信息 
      }
    });
  }
  return (
    <div>
      <Header style={{ display: 'flex', color: "#fff", alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ height: 40, lineHeight: '40px', color: "#fff", padding: "0 10px" }}>
          <span>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: toggle,
            })}
          </span>
          <span style={{ fontSize: 20, marginLeft: 10 }}>
            千锋在线教务管理系统
          </span>
        </div>


        <marquee behavior="" direction="" style={{ fontSize: 24, margin: "0 20", color: "orange", padding: "0 20px", maxWidth: 400 }}>
          千锋-拼搏到无能为力-坚持到感动自己
        </marquee>


        {
          userInfo && <div className="userinfo" style={{ display: 'flex', color: "#fff", alignItems: 'center', justifyContent: 'space-between' }}>


            <Dropdown
              overlay={
                <Menu>
                  <Menu.Item key={1} onClick={() => history.push("/main/info")}>个人中心</Menu.Item>
                  <Menu.Item key={2} onClick={() => history.push("/main/home")}>首页</Menu.Item>
                </Menu>
              }
            >
              <span style={{ fontSize: 20 }}> {userInfo.account}</span>
            </Dropdown>

            <Tag style={{ margin: "0 0 0 10px" }} color={roleList.find(item => item.value == userInfo.role).color} >
              {roleList.find(item => item.value == userInfo.role).text}
            </Tag>

            <Tooltip title="更新头像" placement="top">
              <input type="file" ref={file} style={{ display: 'none' }} onChange={startSenfFile} />
              {
                userInfo.avatar ?
                  <Avatar onClick={uploadFile} style={{ margin: "0 0 0 10px", cursor: 'pointer' }} shape="circle" src={userInfo.avatar.replace(/public/, baseURL)} />
                  :
                  <Avatar onClick={uploadFile} style={{ margin: "0 0 0 10px", cursor: 'pointer' }} shape="circle" icon={<UserOutlined />} />
              }
            </Tooltip>


            <Tooltip title="退出登录" placement="top">
              <Button onClick={logoutClick} style={{ margin: "0 0 0 10px" }} shape="circle" type="danger" icon={<PoweroffOutlined />} ></Button>
            </Tooltip>
          </div>
        }
      </Header>
    </div>
  )
}

export default connect(
  state => {
    return {
      collapsed: state.getIn(['data', 'collapsed'])
    }
  }
)(withRouter(observer(Head)))